<script lang="ts" setup>
// 谷歌地图地理翻遍码，谷歌地图地点搜索
// https://blog.51cto.com/u_15881945/5873471

import { useWindowSize } from "@vant/use";
import { debounce, pxChangeRem } from "@/utils/index";
import httpFetch from "@/api/httpFetch";
defineOptions({
  name: "FuzzySearch"
});
const show = ref(false);
defineExpose({
  show
});
const { height } = useWindowSize();
function handleClick(item: any, event: any) {
  console.log(item, event);
}
const googleMapApiKey = "AIzaSyDtGfe-uCxF3xUD7KBkv8hYcO9UWQiLw3I";
const address = ref("");
// const addressList = ref([]);
const loading = ref(false);
function handleInput({ target: { value } }: any) {
  console.log(value);
  // handleSearch();
}
const handleSearch = debounce(async () => {
  try {
    console.log(address.value);
    if (!address.value.trim()) {
      return;
    }
    loading.value = true;
    const res = await httpFetch(
      "/maps/api/place/queryautocomplete/json",
      "GET",
      { key: googleMapApiKey, input: address.value }
    );
    console.log(res);
    loading.value = false;
  } catch (error) {
    console.error("发生错误:", error);
    loading.value = false;
  }
}, 300);
function hiddenModal() {
  show.value = false;
  _css(document.documentElement, "overflow", "visible");
}
</script>
<template>
  <van-overlay
    :show="show"
    :z-index="1"
    teleport="body"
    class-name="w-full max-w left-[50%_!important] translate-x-[-50%] bg-[rgba(0,0,0,0.4)_!important]"
    :lock-scroll="false"
  >
    <div class="w-full" @click="hiddenModal">
      <div class="p-16 flex flex-col gap-y-10">
        <div class="w-full center gap-x-4 sticky top-16 relative" @click.stop>
          <div @click.stop="hiddenModal" class="absolute left-0">
            <van-icon name="arrow-left" size="20" color="#333" />
          </div>
          <div class="w-[100%]">
            <input
              type="text"
              :class="[address ? 'pr-92' : 'pr-70', 'w-full h-40 pl-20']"
              placeholder="Please enter the address to search"
              v-model="address"
              @input="handleInput"
            />
          </div>
          <div
            :class="[
              address ? 'w-74' : 'w-52',
              'absolute right-10 text-[#1989fa] flex justify-between items-center'
            ]"
          >
            <van-icon
              name="clear"
              v-if="address && !loading"
              size="14"
              color="#c9c9c9"
              @click="address = ''"
            />
            <van-loading type="spinner" v-if="address && loading" size="14" />
            <van-divider
              class="mx-0"
              vertical
              :style="{ borderColor: '#1989fa' }"
            />
            <span class="font-500 w-43" @click="handleSearch">search</span>
          </div>
        </div>
        <div
          class="overflow-y-auto"
          :style="{
            height: pxChangeRem(height - (16 + 40 + 10))
          }"
        >
          <ul class="text-[#fff] flex flex-col">
            <li
              class="h-40 lh-40 border-b-1 border-b-solid border-b-[rgba(178,178,178,0.5)] last-of-type:border-b-none"
              v-for="(item, index) in 50"
              :key="index"
              @click="handleClick(item, $event)"
            >
              深圳北站---{{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </van-overlay>
</template>
<style scoped lang="scss"></style>
